fix(react-ui): stop false "unknown key" warnings for valid *ChartPalette theme keys - #721
Conversation
…eme keys The Theme type declares eight *ChartPalette keys, but both theme validators derived their allow-list from Object.keys(defaultLightTheme), which defines none of them - so the typed chart-theming API warned "unknown key ... It will be ignored" on every dev boot (twice per key), even though the palettes flow through the merge and charts apply them. Both validators now share one allow-list (default theme keys + a CHART_PALETTE_KEYS constant guarded by `satisfies Record<keyof ChartColorPalette, true>`), so type/runtime drift is a compile error. Regression tests cover the allow-list, warning behavior, and palette flow. Fixes #714 Co-authored-by: Cursor <cursoragent@cursor.com>
…ource Replaces the hand-mirrored CHART_PALETTE_KEY_MAP + satisfies guard with one as-const array in types.ts that the ChartColorPalette type derives from — a palette key is now written in exactly one place and type/runtime drift is impossible by construction. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011nPH2Rn2XGXETgx5Yu5seX
There was a problem hiding this comment.
what is this ?
There was a problem hiding this comment.
The shared ESLint config (root eslint.config.cjs:14-18) type-checks **/__tests__/** files against ./tsconfig.test.json, resolved per package. react-ui's main tsconfig.json can't serve that role — it's the build config (rootDir: src, outDir: dist) and explicitly excludes src/**/__tests__ so tests never compile into dist/. This PR adds react-ui's first test, so without this file lint:check hard-errors: Parsing error: TS5012: Cannot read file '.../tsconfig.test.json': ENOENT (verified by deleting it and running eslint). Contents are just extends ./tsconfig.json + noEmit + include all of src — a copy of react-headless's existing tsconfig.test.json, which exists there for the same reason.
2 participants
Fixes #714
Background
Theming charts the typed way —
createTheme({ defaultChartPalette: [...] })passed toThemeProvider'slightTheme/darkTheme— compiles cleanly but printed dev-console warnings on every boot, twice per palette key:The
Themetype declares eight*ChartPalettekeys (default/bar/line/area/pie/radar/radial/horizontalBar), but both validators derived their allow-list fromObject.keys(defaultLightTheme)(ThemeProvider.tsx:112,utils.ts:70), and the default themes define none of those keys — so every valid palette key tripped "unknown key". A runtime probe through the realThemeProvider → useTheme() → useChartPalettechain showed the warning text was wrong: the theme merge spreads user overrides wholesale, so the palettes were never ignored — charts applied them all along, including the fallback todefaultChartPalettefor unset chart types. Dev-only noise, but convincing enough that a downstream consumer abandoned theme-level palettes for per-chartcustomPaletteworkarounds.Goal
Make the typed chart-palette API usable without false warnings, keep typo detection for genuinely unknown keys, and ensure the type-vs-runtime drift that caused this cannot silently recur.
What this PR does
KNOWN_THEME_KEYS=Object.keys(defaultLightTheme)+CHART_PALETTE_KEYS, consumed by bothcreateTheme()and the ThemeProvider prop validator (previously two independent copies).ChartColorPalettetype from a singleCHART_PALETTE_KEYSas constarray intypes.ts— a palette key is written in exactly one place, so type/runtime drift is impossible by construction (no guarded mirror to maintain).defaultTheme.ts: a default palette would shadow the per-chartthemeprop fallback inuseChartPalette, andthemeToCssVarsfilters to string values, so array palettes never belonged in CSS vars anyway.ThemeProvider/__tests__/ThemeProvider.test.tsx) plustsconfig.test.json(required by the ESLint override for__tests__files, mirroring react-headless), and updates the ThemeProviderAGENTS.mdwith the palette-key exception to the "adding a new token" recipe.Outcome
Re-ran the exact pre-fix reproduction probe against this branch:
theme.barChartPalettein contextdefaultChartPalete)defaultChartPaletteVerification:
pnpm --filter @openuidev/react-ui run test— 13/13 pass (7 new: allow-list covers every declared palette key + every default-theme key;createThemesilent for all 8 palette keys; ThemeProvider props silent for palette keys; genuine unknown keys still warn with suggestion; palettes flow theme →useTheme()→useChartPaletteincl.defaultChartPalettefallback)pnpm --filter @openuidev/react-ui run typecheck— cleanpnpm --filter @openuidev/react-ui run lint:check— 0 errors (pre-existing warnings only)pnpm --filter @openuidev/react-ui run format:check— clean